<template>
  <div class="box">
    <!-- 轮播图 -->
    <div class="lunbo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(v, k) in gallery" :key="k"
          ><img :src="v.img_url" alt="" width="100%"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 顶部标签 -->
    <div class="top">
      <van-row>
        <van-col span="8"
          ><van-icon class="tubiao" name="checked" />30天无忧退货</van-col
        >
        <van-col span="8"
          ><van-icon class="tubiao" name="checked" />48小时快速退费</van-col
        >
        <van-col span="8"
          ><van-icon class="tubiao" name="checked" />满88元免邮费</van-col
        >
      </van-row>
      <div class="detailes_content">
        <h1>{{ info.name }}</h1>
        <h6>{{ info.goods_brief }}</h6>
        <p>{{ info.retail_price }}</p>
      </div>
      <hr />
    </div>
    <!-- 弹出层 -->

    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div class="tan">
        <div class="top_p">
          <img :src="info.list_pic_url" alt="" />
          <div class="title">
            <p>价格：￥ {{ info.retail_price }} 元</p>
            <p>库存：{{ info.goods_number }}</p>
          </div>
          <div class="bottom">
            <p>数量：</p>
            <van-stepper v-model="value" />
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 商品参数 -->
    <div class="content">
      <h2>商品参数</h2>
      <div class="detail" v-for="(v, k) in attribute" :key="k">
        <span class="s1">{{ v.name }}</span>
        <span class="s2">{{ v.value }}</span>
      </div>
    </div>
    <!-- 长图片 -->
    <div class="long_pic" v-html="info.goods_desc"></div>
    <!-- 常见问题 -->
    <div class="question">
      <div class="ques_box">
        <span class="long_left"></span>
        <h2>常见问题</h2>
        <span class="long_right"></span>
      </div>

      <div>
        <ul>
          <li v-for="(v, k) in issue" :key="k">
            <span>•</span>
            <span class="q">{{ v.question }}</span>
            <span class="a">{{ v.answer }}</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 相关产品 -->
    <div class="product">
      <h2>相关产品</h2>
      <van-grid class="product" :border="false" :column-num="2">
        <van-grid-item v-for="(v, k) in goodsList" :key="k" @click="fun(v.id)">
          <van-image :src="v.list_pic_url" />
          <p class="p1">{{ v.name }}</p>
          <p class="p2">{{ v.retail_price.toFixed(2) }}</p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 徽标提示 -->
    <div class="bottom">
      <van-goods-action>
        <van-goods-action-icon icon="star" text="已收藏" />
        <van-goods-action-icon
          icon="cart-o"
          text="立即购买"
          :badge="num"
          @click="tocart"
        />
        <van-goods-action-button type="danger" text="立即购买" />
        <van-goods-action-button
          @click="showPopup"
          type="warning"
          text="加入购物车"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import {
  GetDetails,
  GetDetailsPro,
  GetAddData,
  GetCountData,
} from "@/request/api";

export default {
  data() {
    return {
      gallery: "",
      attribute: "",
      info: [],
      issue: [],
      goodsList: [],
      show: false,
      value: 1,
      productList: [],
      num: 0,
    };
  },
  created() {
    GetDetails({ id: this.$route.query.id }).then((res) => {
      let { gallery, attribute, info, issue, productList } = res.data;
      //   轮播图
      this.gallery = gallery;
      //   商品三个标题
      this.info = info;
      //   商品参数
      this.attribute = attribute;
      //   常见问题
      this.issue = issue;
      // 商品
      this.productList = productList;
      //   console.log(res.data);
    });
    GetDetailsPro({ id: this.$route.query.id }).then((res) => {
      let { goodsList } = res.data;
      this.goodsList = goodsList;
      // console.log(res.data.goodsList);
    });
    // 获取购物车数量
    GetCountData().then((res) => {
      this.num = res.data.cartTotal.goodsCount;
      // console.log(res);
    });
  },
  methods: {
    tocart() {
      this.$router.push({
        path: "/Car",
      });
    },
    showPopup() {
      let user = JSON.parse(localStorage.getItem("username"));
      if (!user) {
        this.$router.push("/Me");
      }
      if (this.show == false) {
        this.show = true;
      } else {
        let goodsId = this.$route.query.id;
        let productId = this.productList[0].id;
        let number = this.value;
        GetAddData({ goodsId, productId, number }).then((res) => {
          // console.log(res);
          this.num = res.data.cartTotal.goodsCount;
          this.$toast.success("添加成功");
        });
      }
    },
    fun(id) {
      this.$router.push({
        path: "/Details",
        query: {
          id: id,
        },
      });
      this.$router.go(0);
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  font-size: 0.13rem;
  width: 100%;
  text-align: center;
  .tubiao {
    color: #8b0000;
  }
}
.detailes_content {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0.3rem 0;
  h1 {
    font-size: 0.2rem;
  }
  h6 {
    font-size: 0.14rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }
  p {
    font-size: 0.14rem;
  }
  h2 {
    font-size: 0.2rem;
    text-align: left;
    margin-bottom: 0.2rem;
    padding-left: 0.1rem;
  }
}
.detail {
  text-align: left;
  font-size: 0.14rem;
  padding: 0.1rem;
  background: #efefef;
  border-radius: 0.06rem;
  height: 0.1rem;
  line-height: 0.1rem;
  align-items: center;
  margin-bottom: 0.05rem;
}
.p1 {
  margin-left: 0.1rem;
  margin-bottom: 0.05rem;
}
.van-stepper {
  // margin-left: 0.1rem;
}
.van-card__title {
  margin-top: 0.1rem;
  font-size: 0.14rem;
}
.van-card__desc {
  font-size: 0.14rem;
  margin-top: 0.3rem;
  color: #000;
}
/deep/.long_pic p {
  line-height: 0;
}
/deep/.long_pic p img {
  width: 3.75rem;
}

.question {
  ul {
    width: 3.75rem;
    height: 2.6rem;
    span {
      margin-left: 0.1rem;
    }
    .q {
      font-size: 0.16rem;
    }
    .a {
      display: block;
      font-size: 0.14rem;
      padding: 0.1rem;
      color: rgb(114, 114, 114);
    }
  }
}
.question h2 {
  width: 30%;
  height: 0.4rem;
  line-height: 0.4rem;
  background: #fff;
  text-align: center;
  margin: 0 auto;
  z-index: 222;
}
.product {
  padding-bottom: 0.3rem;
}
.product h2 {
  width: 30%;
  height: 0.4rem;
  background: #fff;
  text-align: center;
  margin: 0 auto;
}
/deep/.p1 {
  font-size: 0.13rem;
  color: #333333;
}
.p2 {
  padding-top: 0.1rem;
  color: #8b0000;
  font-size: 0.12rem;
}
.s2 {
  line-height: 0.15rem;
}
.van-popup {
  margin-bottom: 0.5rem;
}
.bottom {
  position: absolute;
  bottom: 0;
  z-index: 11111;
}
.ques_box {
  width: 100%;
  font-size: 18px;
  position: relative;
  background-color: #fff;
  height: 0.4rem;
}
.long_left {
  width: 15%;
  background: rgb(95, 95, 95);
  position: absolute;
  top: 0.2rem;
  display: block;
  height: 0.02rem;
  margin-left: 0.9rem;
}
.long_right {
  width: 15%;
  background: rgb(95, 95, 95);
  position: absolute;
  top: 0.2rem;
  display: block;
  height: 0.02rem;
  left: 2.3rem;
}
.tan {
  font-family: "黑体", serif;

  .top_p {
    img {
      width: 1rem;
      height: 1rem;
    }
  }

  .title {
    position: absolute;
    top: 0.15rem;
    left: 1rem;
    border: 0;

    p {
      font-size: 0.16rem;
      text-align: left;
      margin-bottom: 0.2rem;
    }
  }

  .bottom {
    position: absolute;
    bottom: 0;
    //z-index:22 ;
    p {
      font-size: 0.2rem;
      margin: 0.2rem 0.1rem;
    }

    .van-stepper {
      margin: 0 0.1rem;
    }
  }
}
</style>